<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线点名系统 - 学生签到</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fa;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background: white;
            padding: 40px; /* 增加内边距 */
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 350px; /* 固定宽度 */
            max-width: 90%; /* 适应小屏幕 */
            text-align: center; /* 文字居中 */
        }
        h1 {
            margin-bottom: 25px;
            font-size: 28px; /* 增加标题字体大小 */
            color: #333;
        }
        input {
            width: calc(100% - 20px); /* 使输入框宽度适应容器 */
            padding: 15px; /* 增加内边距 */
            margin-bottom: 15px;
            border: 2px solid #ccc; /* 边框厚度 */
            border-radius: 5px;
            transition: border-color 0.3s;
            font-size: 18px; /* 增加字体大小 */
            box-sizing: border-box; /* 包含边框和内边距 */
        }
        input:focus {
            border-color: #28a745; /* 聚焦时边框颜色 */
            outline: none;
        }
        button {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 15px; /* 增加内边距 */
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%; /* 按钮宽度为100% */
            font-size: 18px; /* 增加字体大小 */
        }
        button:hover {
            background-color: #218838; /* 悬停时按钮颜色 */
        }
        #message {
            margin-top: 15px;
            font-weight: bold;
            color: #d9534f; /* 错误信息颜色 */
        }
        #message.success {
            color: #5cb85c; /* 成功信息颜色 */
        }
    </style>
</head>
<body>
<div class="container">
    <h1>学生签到</h1>
    <form id="attendanceForm">
        <input type="text" id="studentName" placeholder="请输入姓名" required>
        <button type="submit"><i class="fas fa-check"></i> 签到</button>
    </form>
    <div id="message"></div>
</div>

<script>
    document.getElementById('attendanceForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const studentName = document.getElementById('studentName').value;

        // 获取当前时间并格式化为 ISO 字符串
        const attendanceTime = new Date().toISOString(); // 确保时间格式为 TIMESTAMP

        fetch('/api/students', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: studentName,
                present: true, // 根据需要更新状态
                attendanceTime: attendanceTime // 添加 attendance_time 字段
            })
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('签到失败！请重试。');
                }
                return response.json();
            })
            .then(data => {
                document.getElementById('message').innerText = '签到成功！';
                document.getElementById('message').classList.add('success');
                document.getElementById('studentName').value = '';
            })
            .catch(error => {
                document.getElementById('message').innerText = error.message;
                document.getElementById('message').classList.remove('success');
            });
    });
</script>
</body>
</html>